﻿<Page x:Class="NewMarkersSample.CompositeDSPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
		xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
    Title="Composite Data Window" Loaded="Window_Loaded">
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition Height="*"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>

		<d3:ChartPlotter Name="plotter">
			<d3:MarkerChart Name="chart" IndependentValuePath="X" DependentValuePath="Y">
				<d3:NewLegend.Description>
					<TextBlock FontFamily="Consolas" Text="Composite data"/>
				</d3:NewLegend.Description>
				<d3:NewLegend.DetailedDescription>
					Composite data source with two parts - X and Y.
				</d3:NewLegend.DetailedDescription>
				
				<d3:EllipseMarker MarkerFill="{Binding Path=SelectedBrush, ElementName=colorSelector}"
								  MarkerWidth="{Binding Path=SelectedValue, ElementName=widthSelector}"
								  MarkerHeight="{Binding Path=SelectedValue, ElementName=heightSelector}"
								  MarkerStroke="{x:Null}" MarkerStrokeThickness="0"/>
			</d3:MarkerChart>
			
			<Button Content="Change Angle" Name="changeAngleBtn" Click="changeAngleBtn_Click"
					Canvas.Bottom="10" Canvas.Right="10"/>
		</d3:ChartPlotter>

		<StackPanel Grid.Row="1">
			<d3:ColorSelector Name="colorSelector"/>
			<d3:NumericSelector Name="widthSelector" Range="0.0-100.0" SelectedValue="5.0"/>
			<d3:NumericSelector Name="heightSelector" Range="0.0-100.0" SelectedValue="5.0"/>
		</StackPanel>
	</Grid>
</Page>
